<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>

    <!-- vue -->
    <script src="/assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="/assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="/assets/js-vue/element/index.js"></script>
    <script type="text/javascript" src="/assets/jquery-3.6.1.min.js"></script>
    <!--公共方法-->
    <script type="text/javascript" src="/utils/common.js"></script>
    <!--请求封装-->
    <script type="text/javascript" src="/utils/myAjax.js"></script>


</head>
<body>
    <div id="app">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="图书编号" prop="id">
                <el-input
                        v-model="queryParams.id "
                        placeholder="请输入图书编号"
                        clearable
                        @keyup.enter.native="list()"
                />
            </el-form-item>
            <el-form-item label="书名" prop="name" >
                <el-input
                        v-model="queryParams.name "
                        placeholder="请输入书名"
                        clearable
                        @keyup.enter.native="list()"
                />
            </el-form-item>
            <el-form-item label="作者" prop="author" >
                <el-input
                        v-model="queryParams.author "
                        placeholder="请输入作者"
                        clearable
                        @keyup.enter.native="list()"
                />
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="list()">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" style="margin-bottom: 10px">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="toAdd()"
                >新增</el-button>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 15px">
            <el-table v-loading="loading" :data="tableData" style="width: 100%;margin-bottom: 15px">
                <!--<el-table-column type="selection" width="55" align="center" />-->
                <el-table-column
                        prop="id"
                        label="图书编号"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="书名"
                        align="center">
                </el-table-column>
                <el-table-column label="作者"  align="center" prop="author" ></el-table-column>
                <el-table-column label="出版社"  align="center" prop="publish" >
                </el-table-column>
                <el-table-column label="出版年份"  align="center" prop="year" >
                </el-table-column>
                <el-table-column label="库存数量"  align="center" prop="store" >
                </el-table-column>
                <el-table-column label="操作"  align="center" >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="toEdit(scope.row)"
                        >修改</el-button>
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="toRent(scope.row)"
                        >借书</el-button>
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="toRentList(scope.row)"
                        >借阅信息</el-button>
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="toDel(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="display: flex;justify-content: end;margin-right: 100px"
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :current-page.sync="page.current"
                    :page-size.sync="page.size"
                    @current-change="list()"
            >
            </el-pagination>
        </el-row>

        <!-- 添加或修改用户信息对话框 -->
        <el-dialog title="编辑图书" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" label-width="80px">
                <!--<el-form-item label="图书编号" prop="id">
                    <el-input v-model="form.id" />
                </el-form-item>-->
                <el-form-item label="书名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入书名" />
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="form.author" placeholder="请输入作者" />
                </el-form-item>
                <el-form-item label="出版社" prop="publish">
                    <el-input v-model="form.publish" placeholder="请输入出版社" />
                </el-form-item>
                <el-form-item label="出版年份" prop="year">
                    <el-date-picker
                            v-model="form.year"
                            type="year"
                            value-format="yyyy"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="库存数量" prop="store">
                    <el-input-number v-model="form.store" :min="0"  label="库存数量"></el-input-number>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSubmit()">确 定</el-button>
                <el-button @click="()=>{this.open =false;}">取 消</el-button>
            </div>
        </el-dialog>


        <!-- 借书框-->
        <el-dialog title="借书" :visible.sync="openRent" width="500px" append-to-body>
            <el-form ref="form" :model="rentForm" label-width="80px">
                <!--<el-form-item label="图书编号" prop="id">
                    <el-input v-model="form.id" />
                </el-form-item>-->
                <el-form-item label="书名" prop="name">
                    <el-input v-model="rentForm.name"   disabled/>
                </el-form-item>
                <el-form-item label="库存" prop="store">
                    <el-input v-model="rentForm.store"   disabled/>
                </el-form-item>
                <el-form-item label="借阅人" prop="rentUser">
                    <el-input v-model="rentForm.rentUser" />
                </el-form-item>
                <el-form-item label="借阅日期" prop="rentDate">
                    <el-date-picker
                            v-model="rentForm.rentDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="rent()">确 定</el-button>
                <el-button @click="()=>{this.openRent =false;}">取 消</el-button>
            </div>
        </el-dialog>


        <!-- 借阅信息-->
        <el-dialog title="借阅信息" :visible.sync="openRentList" width="800px" append-to-body>
            <el-row style="margin-bottom: 15px">
                <el-table  :data="rentList" style="width: 100%;margin-bottom: 15px">
                    <!--<el-table-column type="selection" width="55" align="center" />-->
                    <el-table-column
                            prop="rentUser"
                            label="借书人"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="rentDate"
                            label="借书时间"
                            align="center">
                    </el-table-column>
                    <el-table-column label="归还时间"  align="center" prop="rentBack" ></el-table-column>
                    <el-table-column label="操作"  align="center" >
                        <template slot-scope="scope" v-if="!scope.row.rentBack">
                            <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="back(scope.row)"
                            >归还</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        style="display: flex;justify-content: end;margin-right: 100px"
                        background
                        layout="prev, pager, next"
                        :total="page.total"
                        :current-page.sync="page.current"
                        :page-size.sync="page.size"
                        @current-change="list()"
                >
                </el-pagination>
            </el-row>

        </el-dialog>


    </div>


<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                loading:false,
                tableData:[],
                open:false,
                queryParams:{
                    name:undefined,
                    sex:undefined
                },
                page:{
                    total:0,
                    size:10,
                    current:1,
                },
                form:{},
                formLabelWidth:'120px',
                openRent:false,
                rentForm:{

                },
                openRentList:false,
                rentList:[],
            }
        },
        created(){
            this.list();
        },
        methods:{
            list(){
                let that = this;
                that.loading = true;
                sendAjaxNoToken("/book/list","POST",this.queryParams).then((res)=>{
                    if(res.data && res.data.length > 0 ){
                        const start = (this.page.current -1) * this.page.size;
                        const end = (this.page.current -1) * this.page.size + this.page.size;
                        /*console.log(start)
                        console.log(end)*/
                        that.tableData = res.data.slice(start,end);
                        /*console.log('=====')
                        console.log(this.tableData)*/
                        that.page.total = res.data.length;
                        that.loading = false;
                    }else {
                        that.tableData = [];
                        that.page.total = 0;
                        that.loading = false;
                    }
                })
            },
            toAdd(){
                this.open = true;
                this.form = {
                    store:0,
                };
            },
            handleSubmit(){
                if(this.form.id >= 0){
                    //修改
                    sendAjaxNoToken("/book/edit","POST",this.form).then((res)=>{
                        if(res.msg == '操作成功'){
                            this.$message.success("修改成功");
                            this.list();
                            this.open = false;
                        }else{
                            this.$message.error(res.msg);
                        }
                    })
                }else{
                    //新增
                    sendAjaxNoToken("book/add","POST",this.form).then((res)=>{
                        if(res.msg == '操作成功'){
                            this.$message.success("新增成功");
                            this.list();
                            this.open = false;
                        }else{
                            this.$message.error(res.msg);
                        }
                    })
                }
            },
            toEdit(row){
                sendAjaxNoToken("/book/getInfo","POST",row).then((res)=>{
                    this.form = res.data;
                    this.open = true;
                })
            },
            toRent(row){
                sendAjaxNoToken("/book/getInfo","POST",row).then((res)=>{
                    this.rentForm = {
                        name:res.data.name,
                        store:res.data.store,
                        linkId:res.data.id,
                    };
                    this.openRent = true;
                })
            },
            rent(){
                if(this.rentForm.store ==0 ){
                    alert('没有库存无法借阅');
                    return
                }
                sendAjaxNoToken("/book/rent","POST",this.rentForm).then((res)=>{
                    if(res.msg == '操作成功'){
                        this.$message.success("借书成功");
                        this.list();
                        this.openRent = false;
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            },
            back(row){
                sendAjaxNoToken("/book/back","POST",row).then((res)=>{
                    if(res.msg == '操作成功'){
                        this.$message.success("还书成功");
                        this.list();
                        this.openRentList = false;
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            },
            toRentList(row){
                let that = this;
                sendAjaxNoToken("/book/rentList","POST",this.queryParams).then((res)=>{
                    if(res.data && res.data.length > 0 ){
                        that.rentList = res.data;
                        that.openRentList = true;
                    }else {
                        that.rentList = [];
                        this.$message.error("查询失败");
                    }
                })

            },
            toDel(row){
                sendAjaxNoToken("/book/del","POST",row).then((res)=>{
                    if(res.msg == '操作成功'){
                        this.$message.success("删除成功");
                        this.list();
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            },
        }
    })

</script>



</body>
</html>